<template>
  <div class="sales-board">
      <div class="sales-board-intro">
        <h2>流量分析</h2>
        <p>是指在获得网站访问量基本数据的情况下对有关数据进行统计、分析，从中发现用户访问网站的规律，并将这些规律与网络营销策略等相结合，从而发现目前网络营销活动中可能存在的问题，并为进一步修正或重新制定网络营销策略提供依据。当然这样的定义是站在网络营销管理的角度来考虑的</p>
      </div>
      <div class="sales-board-form">
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  购买数量：
              </div>
              <div class="sales-board-line-right">
                <el-input-number
                  v-model="num1"
                  @change="handleChange('buyNum', $event)"
                  :min="1" :max="10"
                  label="描述文字"
                >
                </el-input-number>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  产品类型：
              </div>
              <div class="sales-board-line-right">
                <el-select v-model="value" placeholder="请选择"  @change="handleChange('version', $event)">
                  <el-option
                    v-for="item in versionList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  有效时间：
              </div>
              <div class="sales-board-line-right">
                <ul class="sales-board-line-right">
                  <li
                    v-for="(item, index) of periodList"
                    :key="index"
                    :class="{active : act === item.value}"
                    @click="but(item.value)"
                    @change="handleChange('period', $event)"
                  >
                    {{item.label}}
                  </li>
                </ul>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  产品版本：
              </div>
              <div class="sales-board-line-right">
                <ul class="sales-board-line-right">
                  <li
                    v-for="(item, index) of buyTypes"
                    :key="index"
                    @click="but1(index)"
                    :title="item.label"
                    :class="{active: checkActive(index)}"
                    @change="handleChange('buyType', $event)"
                  >
                    {{item.label}}
                  </li>
                </ul>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  总价：
              </div>
              <div class="sales-board-line-right">
                  {{ price }} 元
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">&nbsp;</div>
              <div class="sales-board-line-right">
                  <div class="button" >
                    立即购买
                  </div>
              </div>
          </div>
      </div>
      <div class="sales-board-des">
        <h2>产品说明</h2>
        <p>网站访问统计分析报告的基础数据源于网站流量统计信息，但其价值远高于原始数据资料。专业的网站访问统计分析报告对网络营销的价值，正如专业的财务分析报告对企业经营策略的价值。</p>

        <h3>用户行为指标</h3>
        <ul>
          <li>用户行为指标主要反映用户是如何来到网站的、在网站上停留了多长时间、访问了哪些页面等，主要的统计指标包括：</li>
          <li>用户在网站的停留时间；</li>
          <li>用户来源网站（也叫“引导网站”）；</li>
          <li>用户所使用的搜索引擎及其关键词；</li>
          <li>在不同时段的用户访问量情况等。</li>
        </ul>

        <h3>浏览网站方式</h3>
        <ul>
          <li>用户上网设备类型</li>
          <li>用户浏览器的名称和版本</li>
          <li>访问者电脑分辨率显示模式</li>
          <li>用户所使用的操作系统名称和版本</li>
          <li>用户所在地理区域分布状况等</li>
        </ul>
      </div>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'DetailAnalysis',
  data () {
    return {
      buyNum: 0,
      version: '',
      period: {},
      buyType: [],
      price: 0,
      value: '',
      num1: 1,
      buyTypes: [],
      versionList: [],
      periodList: [],
      act: 0,
      act1: 0,
      nowIndexes: [0]
    }
  },
  methods: {
    handleChange (attr, val) {
      console.log(val)
      this[attr] = val
    },
    but (value) {
      alert(value)
      this.act = value
    },
    but1 (index) {
      alert(index)
      if (this.nowIndexes.indexOf(index) === -1) {
        this.nowIndexes.push(index)
      } else {
        this.nowIndexes = _.remove(this.nowIndexes, (idx) => {
          return idx !== index
        })
      }
    },
    checkActive (index) {
      return this.nowIndexes.indexOf(index) !== -1
    },
    sell (selVal) {
      alert(selVal)
    },
    getDetailInfo () {
      axios.get('/app/detail1')
        .then(this.handleGetDetailInfo)
    },
    handleGetDetailInfo (res) {
      console.log(res)
      res = res.data
      if (res) {
        this.versionList = res.versionList
        this.buyTypes = res.buyTypes
        this.periodList = res.periodList
      }
    }
  },
  mounted () {
    this.getDetailInfo()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  .buy-dialog-title {
    font-size: 16px;
    font-weight: bold;
  }
  .buy-dialog-btn {
    margin-top: 20px;
  }
  .buy-dialog-table {
    width: 100%;
    margin-bottom: 20px;
  }
  .buy-dialog-table td,
  .buy-dialog-table th{
    border: 1px solid #e3e3e3;
    text-align: center;
    padding: 5px 0;
  }
  .buy-dialog-table th {
    background: #4fc08d;
    color: #fff;
    border: 1px solid #4fc08d;
  }
  .sales-board-line-right
    li
      margin-bottom -10px
      float left
      margin-right 15px
      cursor pointer
      width 60px
      height 25px
      line-height 25px
      text-align center
  .active
    background red
    color white
</style>
